<template>
	<view class="zone">
		<Header title="添加收货地址" color="#fff"></Header>
		<view class="main">
			<view class="box">
				<view class="piece">
					<p>收货人</p>
					<view class="inputbox">
						<input type="text" v-model="name" placeholder="请填写收货人姓名">
					</view>
				</view>

				<view class="piece mart20">
					<p>联系电话</p>
					<view class="inputbox">
						<input type="text" v-model="mobile" placeholder="请填写11位手机号码">
					</view>
				</view>
				
				<view class="piece mart20">
					<p>所在地区</p>
					<view class="inputbox" @click="show = true">
						<text v-if="area==''"> 请选择省市区</text>
						<text v-else> {{province}}-{{city}}-{{area}}</text>
						<u-icon class="arrow_r" name="arrow-down" color="#000" size="18px"></u-icon>
					</view>
				</view>
				<view class="piece mart20">
					<p>详细地址</p>
					<view class="inputbox">
						<textarea name="" v-model="address" placeholder="请填写详细地址" :maxlength="40" cols="5" rows="5"></textarea>
					</view>
				</view>
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"  class="button" @click="receiveAddr()">保存收货地址</u-button>
			</view>
			
		</view>

		<u-picker mode="region" @confirm="confirm" v-model="show"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				area:'',
				city:'',
				province:'',
				address:'',
				name:'',
				mobile:'',
			};
		},
		onLoad(option){
			console.log(option);
			if(option.type == 1) {
				this.name = option.name
				this.mobile = option.mobile
				this.province = option.province
				this.city = option.city
				this.area = option.area
				this.address = option.address
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.area = e.area.label;
				this.city = e.city.label;
				this.province = e.province.label;
			},

			// 添加地址
			async receiveAddr(){
				if(this.name == '' || this.name == 'null') {
					this.$u.toast('请输入收货人姓名')
				}else if(this.mobile == '' || this.mobile == 'null') {
					this.$u.toast('请输入收货人手机号码')
				}else if(!/^1[3456789]\d{9}$/.test(this.mobile)) {
					this.$u.toast("手机号有误");
				}else  if(this.province == '' || this.province == 'null') {
					this.$u.toast('请选择省市区')
				}else if(this.address == '' || this.address == 'null') {
					this.$u.toast('请输入详细地址');
				}else {
					let res = await this.$http.index.receiveAddr({
						name:this.name,
						mobile:this.mobile,
						province:this.province,
						city:this.city,
						area:this.area,
						address:this.address
					});
					this.$u.toast(res.msg)
				}
			}
		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	min-height: 100vh;
}
.main {
	padding: 10px;
}

.box {
	background: rgba(255,255,255,0.7);
	border-radius: 9px;
	padding: 15px;
}

.piece {
	p {
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.inputbox {
		background: #F3F3F3;
		border-radius: 7px;
		padding: 10px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			flex: 1;
			font-size: 14px;
		}

		textarea {
			flex: 1;
			height: 90px;
		}
	}
}

.mart20 {
	margin-top: 20px;
}

.button {
	background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
	background-size: 100% 100%;
	width: 100%;
	height: 55px;
	color: #B73800;
	font-size: 14px;
	font-weight: 600;
	margin-top: 20px;
}



</style>
